<template>
	<div class="view">
		<template>
			<Top :title="'企业信息编辑'"></Top>
		</template>
		<div class="main">
			<div class="main_con">
				<div class="main_title">企业信息编辑</div>
				<div class="main_view">
					<el-form label-position="top" :model="form" ref="form" :rules = rules>
						<el-form-item label="企业名称" prop="title">
							<el-input class="input" v-model="form.title" ></el-input>
						</el-form-item>
						<el-form-item label="头像:" style="margin-right: 20px;">
							<div @click="uploadPicture('flagImg', '1')" v-if="form.picdir == ''">
								<el-upload :action="img_upload" list-type="picture-card" :auto-upload="false"
									:limit="1" :disabled="true">
									<i slot="default" class="el-icon-plus"></i>
									<div slot="file" slot-scope="{file}">
										<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.picdir" alt="">
									</div>
								</el-upload>
							</div>
							<div class="img_box" v-else @click="uploadPicture('flagImg', '1')">
								<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.picdir" alt="">
								<div class="img_tip">
									<div class="img_big" @click.stop="imgBig('1')">
										<i class="el-icon-zoom-in"></i>
									</div>
									<div class="img_remove" @click.stop="imgRemove('1')">
										<i class="el-icon-delete"></i>
									</div>
								</div>
							</div>
						</el-form-item>
						
						<!-- <el-form-item label="所属行业" prop="hangye">
							<el-select v-model="form.hangye" placeholder="请选择"  style="width: 400px;" @change="hangyeChange">
								<el-option
									v-for="item in this.hangyeList"
									:key="item.sort"
									:label="item.sort"
									:value="item.sort">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="意向岗位" prop="gangwei">
							<el-select v-model="form.gangwei" placeholder="请选择"  style="width: 400px;">
								<el-option
									v-for="item in this.gangweiList"
									:key="item.sort"
									:label="item.sort"
									:value="item.sort">
								</el-option>
							</el-select>
						</el-form-item> -->
						<el-form-item label="企业规模"  prop="guimo">
							<el-select v-model="form.guimo" placeholder="请选择"  style="width: 400px;">
								<el-option
									v-for="item in this.qiyeguimoList"
									:key="item.sort"
									:label="item.sort"
									:value="item.sort">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="工作城市/区" prop="city">
							<el-cascader
							size="large"
							:options="options"
							v-model="selectedOptions"
							@change="addressChange" style="width: 400px;">
							</el-cascader>
						</el-form-item>
						<el-form-item label="详细地址" prop="addr">
							<el-input type="input" class="input" v-model="form.addr" ></el-input>
						</el-form-item>
						<el-form-item label="联系人电话" prop="tel">
							<el-input type="input" class="input" v-model="form.tel" ></el-input>
						</el-form-item>
						<el-form-item label="联系人姓名" prop="name">
							<el-input type="input" class="input" v-model="form.name" ></el-input>
						</el-form-item>
						<el-form-item label="微信" prop="wechat">
							<el-input type="input" class="input" v-model="form.wechat" ></el-input>
						</el-form-item>
						<el-form-item label="邮箱" prop="email">
							<el-input type="input" class="input" v-model="form.email" ></el-input>
						</el-form-item>
						<el-form-item label="企业简介" prop="description">
							<el-input type="textarea" :rows="5"  v-model="form.description" style="width: 400px;" ></el-input>
						</el-form-item>
						<el-form-item label="营业执照:" style="margin-right: 20px;">
							<div @click="uploadPicture('flagImg', '2')" v-if="form.businessLicense == ''">
								<el-upload :action="img_upload" list-type="picture-card" :auto-upload="false"
									:limit="1" :disabled="true">
									<i slot="default" class="el-icon-plus"></i>
									<div slot="file" slot-scope="{file}">
										<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.businessLicense" alt="">
									</div>
								</el-upload>
							</div>
							<div class="img_box" v-else @click="uploadPicture('flagImg', '2')">
								<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.businessLicense" alt="">
								<div class="img_tip">
									<div class="img_big" @click.stop="imgBig('2')">
										<i class="el-icon-zoom-in"></i>
									</div>
									<div class="img_remove" @click.stop="imgRemove('2')">
										<i class="el-icon-delete"></i>
									</div>
								</div>
							</div>
						</el-form-item>
						
					</el-form>

				</div>
				<div class="saveBtn">
					<el-button type="primary" size="medium" @click="command()" :disabled="isAdd">保存</el-button>
				</div>
			</div>

			<!--查看大封面-->
		<el-dialog title="查看大封面" :visible.sync="imgVisible" center :close-on-click-modal="false">
			<img :src="$api.imgUrl+imgName" v-if="imgVisible" style="width: 100%" alt="查看">
		</el-dialog>

		<!-- <input type="file" accept="image/*" style="position: absolute;z-index: -10;" ref="imgFile" @change="imgFileChange"> -->
		<FileUpload @fileChange="imgFileChange" ref="imgFile" accept="image/*"></FileUpload>

		</div>
	</div>
</template>

<script>
import Top from "../../components/top.vue";
import Ueditor from "../../components/ueditor.vue"
import { eduList, expList } from "@/util/data.js"
import FileUpload from "@/components/FileUpload.vue"
import { pcaTextArr } from "@/node_k/element-china-area-data"
import { mapState } from "vuex"
export default {
	components: {
		Top, Ueditor,
		FileUpload
	},
	data() {
		return {
			form: {
				id: 0,         //主键
				picdir:'',
				logo:'',
				title:'',
				gangwei:'',
				guimo:'',
				hangye:'',
				description:'',
				province:'',
				city:'',
				addr:'',
				tel:'',
				name:'',
				wechat:'',
				email:'',
				businessLicense:'',
				status:'',
				hname:'',
			},
			rules:{
				title:[{required: true, message: '请输入企业名称', trigger: 'blur' }],
				hangye:[{required: true, message: '请选择所属行业', trigger: ['blur,change']}],
				gangwei:[{required: true, message: '请选择所属岗位', trigger: ['blur,change'] }],
				guimo:[{required: true, message: '请选择企业规模', trigger: ['blur,change'] }],
				province:[{required: true, message: '请输入所在省份', trigger: 'blur' }],
				city:[{required: true, message: '请输入所在城市', trigger: 'blur' }],
				addr:[{required: true, message: '请输入详细地址', trigger: 'blur' }],
				tel:[{required: true, message: '请输入联系人', trigger: 'blur' }],
				name:[{required: true, message: '请输入联系人姓名', trigger: 'blur' }],
				description:[{required: true, message: '请输入企业简介', trigger: 'blur' }],
				hname:[{required: true, message: '请输入登录账号', trigger: 'blur' }],
			},
			
			roleList: [],
			isAdd: false,
			eduList: eduList,
			expList: expList,
			
			//裁切图片参数
			cropperModel: false,
			cropperName: '',
			imgName: '',
			imgVisible: false,
			// mode: [120, 120],
			p_index: "",
			img_upload: "",

			qiyeguimoList:[],
			hangyeList:[],
			gangweiList:[],

options: pcaTextArr,
selectedOptions: [],

		}
	},
	computed: {
		...mapState(['urlParma'])
	},
	methods: {
		// 保存表单验证
		command() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.isAdd = true
					this.save()
				}
			});
		},

		// 保存
		save() {
			this.$http({
				'method': 'post',
				'url': this.$api.companyEdit,
				data: this.form
			}).then(res => {
				if (res.data.code == 20000) {
					this.$message.success(res.data.message)
					this.$router.go(-1)
				} else {
					this.$message.error(res.data.message)
				}
				this.isAdd = false
			})
		},
		// 图片放大
		imgBig(type) {
			if (type == '1') {
				this.imgName = this.form.picdir
			} else if (type == '2') {
				this.imgName = this.form.businessLicense
			}
			this.imgVisible = true
		},

		imgFileChange(data) {
			if (this.p_index == '1') {
				this.form.picdir = data
			} else if (this.p_index == '2') {
				this.form.businessLicense = data
			} else {
				this.form.picdir = data
			}
		},

		fileChange() {
			let file = this.$refs.file.files[0];
			this.form.dataurlFname = file.name;
			let param = new FormData();
			param.append("file", file)
			this.$http({
				method: 'post',
				url: this.$api.uploadFile,
				data: param
			}).then(res => {
				if (res.data) {
					this.form.dataurl = res.data;
					this.$refs.file.value = "";
				} else {
					this.$message.error("上传文件失败！")
				}
			})
		},


		//地区选择
		addressChange(arr) {
			this.form.province = arr[0]
			this.form.city = arr[0]+"/"+arr[1]+"/"+arr[2]
		},
		// 图片删除
		imgRemove(type) {
			if (type == '1') {
				this.form.picdir = ""
			} else if (type == '2') {
				this.form.businessLicense = ""
			}
		},

		// 图片上传
		uploadPicture(name, p_index) {
			this.p_index = p_index
			this.$refs.imgFile.open();
		},

		//图片上传成功后
		handleUploadSuccess(data) {
			this.cropperModel = false;
			this.cropperName = '';
			
		},

		
		dataInit() {
			// this.$http({
			// 	'method': 'get',
			// 	'url': this.$api.companyDetail + this.urlParma.id,
			// }).then(res => {
			// 	if (res.data.code == 20000) {
			// 		let { detail } = res.data.data;
			// 		this.form = detail
			// 	}
			// })
		},
		datasetList(){
			this.$http({
				'method': 'post',
				'url': this.$api.getDatasetSubset,
				data : {
					sortList:["所属行业","企业规模"]
				}
			}).then(res => {
				if (res.data.code == 20000) {
					res.data.data.list.forEach(element => {
						if(element.sort=="企业规模"){
							this.qiyeguimoList = element.list
						}else if(element.sort=="所属行业"){
							this.hangyeList = element.list
						}
					});
					setTimeout(() => {
						this.hangyeChange(this.form.hangye);
					}, 300);
				}
			})
			
		},
		hangyeChange(data){
			this.hangyeList.forEach(element => {
				if(element.sort==data){
					this.gangweiList = element.datasetTreeVos
					return;
				}
			})
		},
		// 获取详情
		dataInit() {
			this.$http({
				'method': 'get',
				'url': this.$api.companyDetail + this.urlParma.id,
			}).then(res => {
				if (res.data.code == 20000) {
					let { detail } = res.data.data;
					this.form = detail
					
					if(this.form.city){
						let arr = this.form.city.split("/")
						this.selectedOptions = arr

					}
				}
			})
		},

	},
	created() {
		this.dataInit()
		this.datasetList()
	}
}
</script>

<style scoped>
@import url(../../assets/css/userAdd.css);
</style>
